<!DOCTYPE html>
<html>

<head>

    {include file="Public:header"}
    <style>
        .radio-inline input[type=radio] {
            margin-top: 4px;
        }

        .checkManual:hover {
            text-decoration-line: underline;
            color: red;
        }
    </style>
</head>

<body style="color:#333;padding:3px; overflow-x: auto;">
<!-- 标题 -->
<div class="page-heade">
    <h1 class="title_color">出库确认单</h1>
</div>
<!-- 标题 -->
<div>
    <form action="" class="form-inline">
        <table class="row-margin-top tab-content table-bordered table" border="1" style="margin-bottom:0">
            <tr>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="" class="form-label">申请人：</label>
                </td>
                <td>{$sqr}<input type="hidden" name="sqrmc" value="{$sqr}"></td>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="">申请人部门：</label></td>
                <td>{$sqrbm}<input type="hidden" name="sqrbm" value="{$sqrbm}"></td>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="">申请日期：</label></td>
                <td>{$sqrq}<input type="hidden" value="{$sqrq}" name="sqrq"></td>
            </tr>
            <tr>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="" class="form-label">确认人：</label>
                </td>
                <td>{$qrr}<input type="hidden" name="qrrmc" value="{$qrr}"></td>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="">确认人部门：</label></td>
                <td>{$qrrbm}<input type="hidden" name="qrrbm" value="{$qrrbm}"></td>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="">确认日期：</label></td>
                <td>{$qrrq}<input type="hidden" name="qrrq" value="{$qrrq}"></td>
            </tr>
            <tr>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="">出库方式：</label></td>
                <td>手动入库 <input type="hidden" name="ckfs" value="手动出库"></td>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="">对应仓库<span class="colorRed">*</span>:</label></td>
                <td>
                    <select name="dyck" id="CorWare" class="form-control">
                        <option value="">请选择</option>
                        {volist name="ck" id="row"}
                        <option value="{$row.id}">{$row.ckjc}</option>
                        {/volist}
                    </select>
                </td>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="">物料类型<span class="colorRed">*</span>:</label></td>
                <td>
                    <div class="wlKindText">
                        <select name="wllx" id="wlKind" class="form-control" onchange="func()">
                            <option value="">请选择</option>
                            <option value="1">销售物料</option>
                            <option value="2">生产物料</option>
                            <option value="3">成品</option>
                        </select>
                        <span class="helpText">帮</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="">出库对象类型：</label></td>
                <td colspan="3">
                    <label for=""><input type="radio" value="1" name="ckdxlx" checked>经销商</label>&nbsp;&nbsp;
                    <label for=""><input type="radio" value="2" name="ckdxlx">网点</label>&nbsp;&nbsp;
                    <label for=""><input type="radio" value="3" name="ckdxlx">工厂</label>&nbsp;&nbsp;
                    <label for=""><input type="radio" value="4" name="ckdxlx">部门</label>&nbsp;&nbsp;
                    <label for=""><input type="radio" value="5" name="ckdxlx">个人</label>&nbsp;&nbsp;
                    <label for=""><input type="radio" value="6" name="ckdxlx">其他</label>
                </td>
                <td style="min-width: 160px;width: 160px" class="text-center"><label for="">出库对象<span class="colorRed">*</span>:</label></td>
                <td>
                    <div style="width:100%;" class="row">
                        <div class="col-xs-6">
                            <div class="input-group" id="jxs_input" >
                                <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="ckdx"  value="">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                            <div id="jxs_queding" class="selectedOnlyOne" style="display: none;">
                                <input type="hidden" name="ckdx">
                                <input type="hidden" name="ckdx_name">
                                <span class="inin"></span>
                                <span class="close">×</span>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <a href="javascript:;" id="selectName">选择</a>
                            <span class="lr_5"></span>
                            <span class="helpText">帮</span>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="min-width: 160px;width: 160px" class="text-center">
                    <label for="" class="form-label">出库原因<span class="colorRed">*</span>：</label>
                </td>
                <td colspan="5">
                    <input type="text" name="ckyy" class="form-control" id="manualReason" style="width: 50%">
                </td>
            </tr>
            <tr>
                <td style="min-width: 160px;width: 160px" class="text-center">
                    <label for="" class="form-label">是否需要发货<span class="colorRed">*</span>：</label>
                </td>
                <td colspan="5">
                    <label for=""><input type="radio" value="0" name="sfxyfh" checked>否</label>
                    <label for=""><input type="radio" value="1" name="sfxyfh" >是</label>
                </td>
            </tr>
            <tr id="shxx" style="display: none;">
                <td style="min-width: 160px;width: 160px" class="text-center">
                    <label for="" class="form-label">收货信息<span class="colorRed">*</span>：</label>
                </td>
                <td colspan="5">
                    <label for="">地址：<input type="text" class="form-control" name="shdz" value="" size="50">&nbsp;&nbsp;收货人：<input type="text" class="form-control" name="shlxr" value="">&nbsp;&nbsp;电话：<input type="text" class="form-control" name="shdh" value=""></label>
                </td>
            </tr>
        </table>
        <table class="table table-bordered">
            <tr class="info">
                <th class="text-center" colspan="2"><span class="font-bold">物料明细</span>(至少添加一条物料明细)</th>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="btn btn-info" type="button" id="addManual">添加出库明细</button>
                </td>
            </tr>
            <tr>
                <td colspan="2" id="manualInfo" style="border:0;padding: 1px;">
                    <table class="table table-bordered text-center" style="margin:0px;padding: 0;display: none;">
                        <thead>`
                        <tr class="info">
                            <th class="text-center">序号</th>
                            <th class="text-center">操作</th>
                            <th class="text-center">编号</th>
                            <th class="text-center">名称</th>
                            <th class="text-center">单位</th>
                            <th class="text-center">单价(元)</th>
                            <th class="text-center">数量</th>
                            <th class="text-center">金额(元)</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot></tfoot>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="min-width: 160px;width: 160px" class="text-center">
                    备注：
                </td>
                <td>
                    <textarea name="bz" style="width: 70%;height: 70px;user-select:none" class="form-control"></textarea><span style="vertical-align: bottom;">500</span>
                </td>
            </tr>
        </table>
        <div class="form-group white-bg" style="margin:20px 10px 20px 20px;">
            {if isset($attach)}
            <ul class="list-group">
                {volist name="attach" id="row"}
                <li class="list-group-item">
                    <a class="badge badge-primary removeIt" data-id="{$row.id}">移除</a>
                    <a href="{$row.path}" target="_blank">{$row.file_name}</a></li>
                {/volist}
            </ul>
            {/if}
            <div id="uploader" class="wu-example">
                <!--用来存放文件信息-->
                <div id="thelist" class="uploader-list"></div>
                <div class="btns">
                    <div id="picker">选择文件</div>
                    <button id="ctlBtn" class="btn btn-default">开始上传</button>
                </div>
                <input type="hidden" name="attach" id="attach">
                <input type="hidden" name="remove" id="remove">
            </div>
            <span>注：最多上传15个文件，每个文件小于50M,支持格式：</span><br>jpg,bnp,gif,png,jpeg,tif,raw,doc,docx,xls,xlsx,ppt,pptx,txt,pdf,rar,zip,mp4,avi,rmvb,rm,mid,3gp,AVI,3GP,,mpg,mp3,wma,wav
        </div>

        <p><span class="lr_5"></span><label for="checkManual" class="checkbox colorRed"><input type="checkbox" name="qrck"
                                                                                               id="checkManual"><a
                href="javascript:;" class="colorRed checkManual" id="">请确认信息填写无误并点选此按钮确认出库</a></label></p>
        <div class="row sub_btn" style="width:100%;text-align:center;padding: 20px 0">
            <input type="button" class="btn btn-success" id="saveCao" disabled value="确认出库">
            <input type="button" class="btn btn-warning" value="返回" onclick="back()">
        </div>
    </form>
</div>
<!-- 全局js -->
<script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
<script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
<!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
<script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- <script src="js/plugins/layer/laydate/laydate.js"></script> -->
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>

<script>
    $('#checkManual').on('click',function () {
        if($(this).is(':checked')){
            $('#saveCao').prop('disabled',false)
        }else{
            $('#saveCao').prop('disabled',true)

        }
    })
    //出库对象类型
    $('[name=ckdxlx]').on('click',function () {

        $('#ckdx').bsSuggest('destroy')
        switch($(this).val()){
            case '2':
                $("#ckdx").bsSuggest({
                    url: '{:url("bs/net")}',
                    effectiveFields: ["id", "title"],
                    /*searchFields: [ "shortAccount"],*/
                    effectiveFieldsAlias: {title: "名称"},
                    ignorecase: true,
                    showHeader: true,
                    showBtn: false,     //不显示下拉按钮
                    delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
                    idField: "id",
                    keyField: "title",
                    clearable: true
                }).on('onDataRequestSuccess', function (e, result) {
                }).on('onSetSelectValue', function (e, keyword) {
                    $(this).val('')
                    $('#jxs_queding').find('.inin').html(keyword.key)
                    $('#jxs_queding').find('[name=ckdx_name]').val(keyword.key)
                    $('#jxs_queding').find('[name=ckdx]').val(keyword.id)
                    $('#jxs_queding').show()
                    $('#jxs_input').hide()
                });
                break;
            case '3':

                break;
            case 4:
                break;
            case 5:
                break;
            case 6:
                break;
            default:
                $("#ckdx").bsSuggest({
                    url: '{:url("bs/jxs")}',
                    effectiveFields: ["id", "title"],
                    /*searchFields: [ "shortAccount"],*/
                    effectiveFieldsAlias: {title: "名称"},
                    ignorecase: true,
                    showHeader: true,
                    showBtn: false,     //不显示下拉按钮
                    delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
                    idField: "id",
                    keyField: "title",
                    clearable: true
                }).on('onDataRequestSuccess', function (e, result) {
                }).on('onSetSelectValue', function (e, keyword) {
                    $(this).val('')
                    $('#jxs_queding').find('.inin').html(keyword.key)
                    $('#jxs_queding').find('[name=ckdx_name]').val(keyword.key)
                    $('#jxs_queding').find('[name=ckdx]').val(keyword.id)
                    $('#jxs_queding').show()
                    $('#jxs_input').hide()
                });
        }
    })
    //出库对象
    $("#ckdx").bsSuggest({
        url: '{:url("bs/jxs")}',
        effectiveFields: ["id", "title"],
        /*searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias: {title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onDataRequestSuccess', function (e, result) {
    }).on('onSetSelectValue', function (e, keyword) {
        $(this).val('')
        $('#jxs_queding').find('.inin').html(keyword.key)
        $('#jxs_queding').find('[name=ckdx_name]').val(keyword.key)
        $('#jxs_queding').find('[name=ckdx]').val(keyword.id)
        $('#jxs_queding').show()
        $('#jxs_input').hide()
    });

    $('body').on('click','.selectedOnlyOne .close',function () {
        $(this).closest('.selectedOnlyOne').hide()
        $(this).closest('.selectedOnlyOne').prev('div').show()
    })

    function back() {
        history.go(-1)
    }

    //添加明细
    $("#addManual").click(function () {
        var wllx = $('[name=wllx]').val()
        var ckdxlx = $('[name=ckdxlx]:checked').val()
        var ckdx = $('[name=ckdx]').val()
        if ($("#CorWare").val() == 0) {
            swal("", "请选择对应仓库！", "error")
        } else if ($("#wlKind").val() == 0) {
            swal("", "请选择物料类型！", "error")
        } else if ($("#manualReason").val() == "") {
            swal("", "出库原因不能为空！", "error")
        } else {
            layer.open({
                type: 2,
                skin: 'layui-layer-rim', //加上边框
                area: ['800px', '500px'], //宽高
                title: "添加销售物料明细",
                content: 'manual_add_alert2.html?wllx='+wllx+'&ckdxlx='+ckdxlx+'&ckdx='+ckdx
            });
        }
    })

    //保存
    $('#saveCao').on('click',function () {
        if(!$('[name=qrck]').is(':checked')){
            swal('请确认信息填写无误并点选确认按钮确认入库')
            return false
        }
        if ($("#manualInfo tbody tr").length == 0) {
            swal("", "请至少添加一条物料明细！", "error")
            return false
        } else if ($("#wlKind").val() == 0) {
            swal("", "请选择物料类型！", "error")
            return false
        } else if ($("#manualReason").val() == "") {
            swal("", "出库原因不能为空！", "error")
            return false
        }
        var list = []
        $('#manualInfo tbody tr').each(function (i,o) {
            list.push(unescape($(o).data('data')))
        })
        var jb = $(this).closest('form').serializeArray()

        $.post('',{jb:jb,list:list},function (data) {
            if(data.success){
                swal({title:data.msg},function () {
                    location.href='{:url("kcgl/kcgl")}'
                })
            }else{
                swal(data.msg,'','error')
            }
        },'json')
    })
    /**
     * 修改销售物料明细
     */
    $(document).on("click", ".modify_manual", function () {
        var wllx = $('[name=wllx]').val()
        var ckdxlx = $('[name=ckdxlx]:checked').val()
        var ckdx = $('[name=ckdx]').val()

        var index = $(this).closest('tr').index()
        var id = $(this).closest('tr').data('data')
        id = unescape(id)
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            area: ['800px', '500px'], //宽高
            title: "修改销售物料明细",
            content: 'manual_update_alert2.html?'+id+'&index='+index+'&wllx='+wllx+'&ckdxlx='+ckdxlx+'&ckdx='+ckdx
        });
    })

    //删除物料明细
    $(document).on("click", ".delThis", function () {
        var _this = $(this).closest('tr')
        var index = $(this).closest('tr').index()
        swal({
                title: "",
                text: "确定删除本条数据？",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnConfirm: false,
            },
            function () {
                $('#manualInfo').find('tbody tr:gt('+index+')').each(function (i,o) {
                    var aa = parseInt($(o).find('td:first-child').html())
                    aa--
                    $(o).find('td:first-child').html(aa)
                })
                _this.remove()
                var $xj_num=0
                var $xj_zje=0
                $("#manualInfo table").find('tbody').find('tr').each(function (i,o) {
                    $xj_num += parseInt($(o).find('td:nth-child(8)').html())
                    $xj_zje += parseInt($(o).find('td:last-child').html())
                })
                var xj = '<tr class="text-right font-bold"><td colspan="7">小计：</td><td>'+$xj_num+'</td><td>'+$xj_zje+'</td></tr>'
                $("#manualInfo table").find('tfoot').html(xj);

                swal("删除！", "", "success");
            });
    })

    //选定物料类型
    function func() {
        //获取被选中的option标签
        var vs = $('#wlKind  option:selected').text();
        var val = $('#wlKind').val();
        $(".wlKindText").html(vs+'<input name="wllx" type="hidden" value="'+val+'">');
    }
    $('[name=sfxyfh]').on('click',function () {
        if($(this).val()=='1')
            $('#shxx').show()
        else
            $('#shxx').hide()
    })
</script>
</body>

</html>
